<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片选择测试</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        .test-section { margin: 20px 0; padding: 20px; border: 1px solid #ccc; }
        button { padding: 10px 20px; margin: 10px; background: #007aff; color: white; border: none; border-radius: 5px; }
        .preview { margin: 20px 0; }
        .preview img { max-width: 300px; max-height: 300px; border: 1px solid #ddd; }
    </style>
</head>
<body>
    <h1>图片选择功能测试</h1>
    
    <div class="test-section">
        <h3>测试图片选择</h3>
        <button onclick="testChooseImage()">选择图片</button>
        <button onclick="testCamera()">拍照</button>
        <div class="preview" id="preview"></div>
    </div>

    <div class="test-section">
        <h3>测试文件输入</h3>
        <input type="file" id="fileInput" accept="image/*" onchange="handleFileSelect(event)">
        <div class="preview" id="filePreview"></div>
    </div>

    <script>
        // 模拟微信小程序的wx.chooseImage
        function testChooseImage() {
            // 创建文件输入元素
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = 'image/*';
            input.onchange = function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        document.getElementById('preview').innerHTML = 
                            `<img src="${e.target.result}" alt="预览图片">`;
                    };
                    reader.readAsDataURL(file);
                }
            };
            input.click();
        }

        function testCamera() {
            // 模拟相机功能
            alert('相机功能需要在真机上测试');
        }

        function handleFileSelect(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('filePreview').innerHTML = 
                        `<img src="${e.target.result}" alt="文件预览">`;
                };
                reader.readAsDataURL(file);
            }
        }
    </script>
</body>
</html> 